<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <customDeptTree @clickDeptNode="clickDeptNode" :show-search-input="true"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-row :gutter="10">
          <span style="font-weight: bold">{{ selectDeptName }}</span>
          <span v-if="yunPianUser.mobile" style="margin-left: 10px" class="balanceText">关联企业账号
            <span v-for="(item,index) in yunPianUser.mobile.split(',')" style="margin-left: 2px">
              <el-tag :type="tagTypeList[index%4]">{{ item }}</el-tag>
            </span>
          </span>
          <span class="balanceText" style="margin-left: 10px">提醒额度</span>
          <span class="balanceValue">¥ {{ yunPianUser.alarm_balance ? yunPianUser.alarm_balance : 0 }}</span>
          <span class="balanceText" style="margin-left: 10px">账户余额</span>
          <span class="balanceValue">¥ {{ yunPianUser.balance ? yunPianUser.balance : 0 }}</span>
        </el-row>

        <div style="margin-top: 20px">
          <el-row>
            <el-form :inline="true" label-width="100px">
              <el-form-item label="手机号">
                <el-input v-model="messageQueryParams.mobile" placeholder="请输入手机号" size="small" clearable/>
              </el-form-item>
              <el-form-item>
                <el-date-picker type="daterange" align="right" unlink-panels range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions" v-model="selectDateRange"
                                :clearable="false"
                                size="small"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="queryMessageList">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <el-table v-loading="loading" :data="messageList" border>
          <el-table-column label="手机号" align="center" prop="mobile" width="120"/>
          <el-table-column label="内容" align="center" prop="text" :show-overflow-tooltip="true"/>
          <el-table-column label="发送状态" align="center" prop="send_status" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.send_status==='SUCCESS'">
                <el-tag type="success">成功</el-tag>
              </template>
              <template v-else>
                <el-tag type="danger">失败</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="接收状态" align="center" prop="report_status" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.report_status==='SUCCESS'">
                <el-tag type="success">成功</el-tag>
              </template>
              <template v-else>
                <el-tag type="danger">失败</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" align="center" prop="send_time" width="180"/>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="messageQueryParams.page_num"
          :limit.sync="messageQueryParams.page_size"
          @pagination="queryMessageList"
          :layout="'sizes, prev, next, jumper'"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getYunPianMessage, getYunPianUser } from '@/api/system/yunPian'

export default {
  name: 'index',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: Number.MAX_VALUE,
      // 云片短信表格数据
      messageList: [],
      // 所选组织的ID
      selectDeptId: undefined,
      // 所选组织的名称
      selectDeptName: undefined,
      // 当前组织下的云片账户
      yunPianUser: {},
      // 云片账户查询参数
      userQueryParams: {
        deptId: undefined
      },
      // 云片短信查询参数
      messageQueryParams: {
        deptId: undefined,
        mobile: undefined,
        startTime: undefined,
        endTime: undefined,
        page_num: 1,
        page_size: 10,
        type: undefined
      },

      // 选择的日期数组, 第一个元素为起始时间, 第二个为结束时间
      selectDateRange: [],

      // 日期选择的快捷选项
      pickerOptions: {
        shortcuts: [
          {
            text: '今日',
            onClick(picker) {
              const start = new Date()
              start.setTime(start.getTime())
              picker.$emit('pick', [start, start])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
              end.setTime(end.getTime())
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
              end.setTime(end.getTime())
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tagTypeList: ['', 'success', 'info', 'warning']
    }
  },
  created() {
    this.getTimeByWeek()

    if (!this.selectDeptId) {
      // 取出当前用户的组织ID
      this.selectDeptId = this.$store.getters.deptId
      this.messageQueryParams.deptId = this.$store.getters.deptId
    }

    // 获取组织名称
    if (!this.selectDeptName) {
      this.selectDeptName = this.$store.getters.deptName
    }

    if (this.selectDeptId !== 100) {
      this.queryUser()
    }
  },
  watch: {
    selectDateRange(value) {
      if (value && value.length > 1) {
        this.messageQueryParams.startTime = value[0].getTime()
        this.messageQueryParams.endTime = value[1].getTime()
      }
    }
  },
  methods: {
    // 查询云片账户信息
    queryUser() {
      getYunPianUser({ deptId: this.selectDeptId }).then(response => {
        if (response.code === 200) {
          this.yunPianUser = response.data

          if (this.yunPianUser.gmt_created) {
            this.queryMessageList()
          }

        }
      }, reject => {
        this.yunPianUser = {}
        this.messageList = []
      })
    },

    // 查询短信列表
    queryMessageList() {
      this.loading = true
      getYunPianMessage(this.messageQueryParams).then(response => {
        if (response.code === 200) {
          this.messageList = response.rows
        }
        this.loading = false
      }, reject => {
        this.loading = false
      })
    },

    // 获取前一周的时间
    getTimeByWeek() {
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      const end = new Date()
      end.setTime(end.getTime())
      this.selectDateRange = [start, end]
    },

    /**
     * 点击树节点
     * @param value
     */
    clickDeptNode(value) {
      this.selectDeptId = value.id
      this.selectDeptName = value.label
      this.messageQueryParams.deptId = value.id
      this.messageQueryParams.page_num = 1
      this.messageQueryParams.mobile = undefined
      this.queryUser()
    }
  }
}
</script>

<style scoped>
/*余额文字样式*/
.balanceText {
  font-size: 16px;
  color: rgba(52, 60, 101, 0.5);
}

/*余额值样式*/
.balanceValue {
  font-size: 18px;
  font-family: 'PingFangSC-Semibold';
  color: #343c65
}
</style>
